<template>
  <div class="multi-container">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    groupOffset: {
      type: Number,
      default: 0
    },
    groupDatas: {
      type: Object,
      default: {}
    },
    head: {
      type: Object,
      // required: true,
      //多multi-list组件调用时，必须定义桥接对象坐标
      validator: function(value) {
        if (value && (value.top || value.left || value.right || value.down)) {
          return true;
        } else {
          return false;
        }
      }
    },
    foot: {
      type: Object,
      default: null
    }
  },
  watch: {
    "groupDatas.dataArr": {
      deep: true,
      handler(n, o) {
        // this.$store.commit("initHs");
        this.initDataInfo();
      }
    }
  },
  data() {
    return {
      hs: this.$store.state.hs
    };
  },
  methods: {
    initDataInfo() {
      this.groupDatas.dataArr.forEach((item, index) => {
        if (
          Object.keys(item).length == 0 ||
          !item.data ||
          item.data.length == 0
        ) {
          return;
        }

        this.initFoc(index, item);
        let group = index + this.groupOffset;
        // 清空区域记忆焦点对象
        this.hs.areaLastFocus[group] = null;
        // console.log("groupOffset" + this.groupOffset);

        // 获焦的时候
        this.hs.addFocus([group], (group, objid, objindex) => {
          console.log(group + "|" + objindex);

          // console.log(this.groupDatas.focArr);
          this.$set(this.groupDatas.focArr[index], objindex, true);

          let maxLine = item.maxLine;
          let pages = Math.ceil(item.data.length / maxLine);
          let pageindex = Math.ceil((objindex + 1) / maxLine);
          let targetIndex;

          if (item.data.length > maxLine && pageindex < pages) {
            // 下一行
            targetIndex = group + "_" + maxLine * pageindex;
          } else {
            let next = this.getNextGroup(index, this.groupDatas.dataArr);
            if (next) {
              targetIndex = this.groupOffset + next + "_0";
            } else if (this.head && this.head.down) {
              targetIndex = this.head.down.replace("-", "_");
            }
          }
          //console.log("scrollTargetIndex", targetIndex);
          // 滚动
          this.$emit("scrollTo", targetIndex);
          // 返回获焦事件
          this.$emit("scrollFoc", { group, objid, objindex });
        });

        // 失去焦点的时候
        this.hs.addBlur([group], (group, objid, objindex) => {
          // 返回失焦事件
          this.$emit("scrollBlur", { group, objid, objindex });
          this.$set(this.groupDatas.focArr[index], objindex, false);
        });
      });
    },
    initFoc(rIndex, listData) {
      // console.log("groupOffset", this.groupOffset);
      let group = rIndex + this.groupOffset;
      let foco = [];
      let that = this;
      let maxLine = listData.maxLine;
      listData.data.forEach((item, index) => {
        foco.push(false);
        new fObject(
          group,
          index,
          null,
          function(obj) {
            if (obj.objindex > maxLine - 1) {
              //同一个group，在2到n行的位置往上移动光标
              that.hs.initFocus(group + "-" + (obj.objindex - maxLine));
            } else if (rIndex == 0 && that.head && that.head.top) {
              //处理第一行元素的向上问题
              that.hs.initFocus(that.head.top);
            } else {
              let prev = that.getPrevGroup(rIndex, that.groupDatas.dataArr);
              if (prev !== null){
                // 动态加载的数据光标聚焦在最后一个元素
                if (that.groupDatas.dataArr[prev].dynamic) {
                  that.hs.initFocus(
                    that.groupOffset +
                    prev +
                    "-" +
                    (that.groupDatas.dataArr[prev].data.length - 1)
                  );
                } else {
                  // that.hs.initFocus(group - 1 + "-0");
                  that.hs.initFocus(that.groupOffset + prev + "-0");
                }
              }else {
                // 当在第一个元素,上事件
                that.$emit('firstBefore')
              }

            }
          },
          function(obj) {
            let pages = Math.ceil(listData.data.length / maxLine);
            let pageindex = Math.ceil((obj.objindex + 1) / maxLine);
            //下一行正下方元素存在，光标移动到正下方
            if (obj.objindex + maxLine <= listData.data.length - 1) {
              that.hs.initFocus(group + "-" + (obj.objindex + maxLine));
              //存在下一行，但是正下方元素不存在，移动到末尾
            } else if (listData.data.length > maxLine && pageindex < pages) {
              that.hs.initFocus(group + "-" + (listData.data.length - 1));
            } else if (that.head && that.head.down) {
              that.hs.initFocus(that.head.down);
            } else {
              let next = that.getNextGroup(rIndex, that.groupDatas.dataArr);
              if (next !== null) {
                that.hs.initFocus(that.groupOffset + next + "-0");
              }else {
                // 当在最后一个元素,下事件
                that.$emit('lastAfter')
              }
            }
          },
          function(obj) {
            let leftObj;
            if (obj.objindex % maxLine == 0) {
              leftObj = that.head && that.head.left ? that.head.left : null;
            } else {
              leftObj =
                obj.objindex > 0 ? group + "-" + (obj.objindex - 1) : null;
            }
            that.hs.initFocus(leftObj);
          },
          function(obj) {
            let rightObj;
            if ((obj.objindex + 1) % maxLine == 0) {
              rightObj = that.head && that.head.right ? that.head.right : null;
            } else {
              rightObj =
                obj.objindex < listData.data.length - 1
                  ? group + "-" + (obj.objindex + 1)
                  : null;
            }
            that.hs.initFocus(rightObj);
          }
        );
      });
      this.hs.fObjCommit();
      this.$set(this.groupDatas.focArr, rIndex, foco);
    },
    setBackObj() {
      this.hs.cookie.set("ck1", JSON.stringify(this.listInfo));
    },
    getPrevGroup(index, list) {
      index -= 1;
      //传入空对象（必须要设置）或者对象的data数据为空，都判断为没有数据
      while (
        list[index] &&
        (Object.keys(list[index]).length == 0 ||
          !list[index].data ||
          list[index].data.length == 0)
      ) {
        index--;
      }
      return index >= 0 ? index : null;
    },
    getNextGroup(index, list) {
      index += 1;
      while (
        list[index] &&
        (Object.keys(list[index]).length == 0 ||
          !list[index].data ||
          list[index].data == 0)
      ) {
        index++;
      }
      return index <= list.length - 1 ? index : null;
    }
  },
  mounted() {
    // console.log(this.groupDatas);
    this.initDataInfo();
  }
};
</script>

<style scoped lang="less">
  .multi-container{
    /*width: 100%;*/
    /*height: 100%;*/
  }
</style>

